<template>
    <f7-card >
        <template v-if="tepType=='traffic_demand'">
            <f7-card-header>
                <img :src='data.user_photo' class="infor-face">
                <div class="text-center_article">{{data.user_name}}</div>
                <div class="text-right">
                    <span>{{data.company_name}}</span>
                    <img v-if="data.verify_phase=='SUCCESS'" src='../assets/img/label-v.png' class="label-v">
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="text-left">
                    <img src='../assets/img/pass-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{data.send_city}}</b>
                        <span>{{data.send_district}}</span>
                        <span v-if="data.time_cost">{{data.time_cost.time_stamp|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="text-center">
                    <i>{{data.amount}}吨 {{data.category_penult_chn}}</i>
                    <h5 class="status-bg text-orange ">￥{{data.price_total/data.amount}}元/吨</h5>
                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b>{{data.receive_city}}</b>
                        <span>{{data.receive_district}}</span>
                        <span>{{data.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
            <f7-card-footer>
                已有<template v-if="data.unoffer_list">{{data.unoffer_list.length}}</template>家企业接单
                <span>
                    距结束<daoJs :endTime="data.time_validity"></daoJs>
                </span>
            </f7-card-footer>
        </template>
        <template v-if="tepType=='traffic_plan' && data.demand">
            <f7-card-header>
                <img :src='data.demand.user_photo' class="infor-face">
                <div class="text-center_article">{{data.demand.user_name}}</div>
                <div class="text-right">
                    <span>{{data.demand.company_name}}</span>
                    <img v-if="data.demand.verify_phase=='SUCCESS'" src='../assets/img/label-v.png' class="label-v">
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="text-left">
                    <img src='../assets/img/pass-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{data.demand.send_city}}</b>
                        <span>{{data.demand.send_district}}</span>
                        <span v-if="data.demand.time_cost">{{data.demand.time_cost.time_stamp|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="text-center">
                    <i>{{data.demand.amount}}吨 {{data.demand.category_penult_chn}}</i>
                    <h5 class="status-bg text-orange ">￥{{data.demand.price_total/data.demand.amount}}元/吨</h5>
                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b>{{data.demand.receive_city}}</b>
                        <span>{{data.demand.receive_district}}</span>
                        <span>{{data.demand.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
            <f7-card-footer>
                已有<template v-if="data.demand.unoffer_list">{{data.demand.unoffer_list.length}}</template>家企业接单
                <span>
                    距结束<daoJs :endTime="data.demand.time_validity"></daoJs>
                </span>
            </f7-card-footer>
        </template>
        <template v-if="tepType!='traffic_demand' && tepType!='traffic_plan'">
            <f7-card-header>
                <div class="text-center_tite">
                    {{data.demand_company_name}}
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="text-left">
                    <img src="../assets/img/pass-icon.png" class="line-icon" />
                    <div class="pull-left">
                        <b>{{data.send_city}}</b>
                        <span>{{data.send_district}}</span>
                        <span v-if="data.time_cost">{{data.time_cost.time_stamp|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="text-center">
                    <i>{{data.amount}}吨 {{data.category_penult_chn}}</i>
                    <h5 class="status-bg text-orange ">￥{{data.price_total/data.amount}}元/吨</h5>
                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b>{{data.receive_city}}</b>
                        <span>{{data.receive_district}}</span>
                        <span>{{data.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
            <f7-card-footer>
                <template v-if="data.status == 'effective'&&data.step == '3'">等待您找车运输</template>
                <template v-if="data.status == 'effective'&&data.step == '3.5'">继续指派车辆抢单</template>
                <template v-if="data.status == 'effective'&&data.step == '4'">继续指派车辆抢单</template>
            </f7-card-footer>
        </template>
    </f7-card>
</template>

<script>
import daoJs from './daoJs.vue'
export default {
  name: 'list',
  props: ['data','tepType'],
  components: {daoJs},
  data () {
    return {

    }
  },
  methods: {

  }

}
</script>

<style scoped>
<!--卡片css-- >
.ios .card-header {
  padding: 10px 15px 0px 15px;
  position: static;
}
.ios .card-footer {
  padding: 0px 15px;
  min-height: 30px;
  font-size: 12px;
  color: #999;
  position: static;
}
.infor-face {
  max-width: 40px;
  max-height: 40px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.text-center_article {
  position: absolute;
  font-size: 14px;
  color: #000;
  padding-left: 50px;
}
.text-right {
  text-align: center;
}
.text-right span {
  margin: 0 0 3px 0;
  font-size: 10px;
  color: #999;
  display: inherit;
}
.label-v {
  width: 24px;
  height: 14px;
  vertical-align: text-bottom;
  vertical-align: middle;
}
.line-icon {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 45px;
}
.status-bg {
  background: url('../assets/img/route-bg.png') no-repeat top center;
  background-size: 95px 4px;
  margin-top: 6px;
  padding-top: 10px;
  width: 97px;
}
.pull-left {
  text-align: left;
  margin-left: 24px;
}
.pull-left span {
  font-size: 12px;
  color: #666;
  display: block;
  margin-left: 0px !important;
}
.pull-left b {
  font-size: 14px;
  color: #000;
  display: block;
}
.pull-right {
  text-align: right;
}

.pull-right span {
  font-size: 12px;
  color: #666;
  display: block;
}
.pull-right b {
  font-size: 14px;
  color: #000;
  display: block;
}
.text-center i {
  font-style: normal;
  color: #333;
  font-size: 12px;
  text-align: center;
  display: inherit;
}
.text-center_tite {
  font-size: 12px;
  color: #333;
}
.text-orange {
  margin: 0px;
  color: #ff6c00;
  font-weight: normal !important;
  font-size: 13px;
  text-align: center;
}
</style>
